<template>
  <div>
    <zm-panel
      title="选择产品"
      :visible.sync="value"
      @change="close"
      class="selectProductStyle"
    >
      <app-block>
        <div class="df-wrap df">
          <div class="w200 br mr20">
            <el-tree
              v-loading="loading"
              :data="treeList"
              :props="defaultProps"
              :default-expand-all="true"
              :expand-on-click-node="true"
              :check-on-click-node="true"
              current-node-key="-1"
              node-key="id"
              highlight-current
              @node-click="handleNodeClick"
              class="treeStyle"
            ></el-tree>
          </div>
          <div class="flex1">
            <zm-form :model="searchForm" ref="searchForm" inline class="mt20">
              <zm-form-item prop="name">
                <zm-input
                  v-model="searchForm.name"
                  class="w220"
                  placeholder="请输入产品名称/编号查询"
                ></zm-input>
              </zm-form-item>
              <zm-form-item prop="productType">
                <zm-data-select
                  v-model="searchForm.productType"
                  k1="productType"
                  class="w200"
                  clearable
                  placeholder="产品类型"
                  multiple
                  str
                >
                </zm-data-select>
              </zm-form-item>
              <zm-form-item>
                <zm-button type="primary" @click="onSearch">查询</zm-button>
                <zm-button
                  type="warning"
                  @click="toReset"
                  t="reset"
                ></zm-button>
              </zm-form-item>
              <zm-form :model="form" ref="zmForm" :rules="productRules">
                <zm-form-item prop="productId">
                  <span v-if="form.productId">
                    已选择：【<span class="text-primary">{{ form.name }}</span>】
                  </span>
                  <span v-else>未选择产品</span>
                </zm-form-item>
              </zm-form>
            </zm-form>
            <zm-table-data
              v-loading="loading"
              :data="tableParams.data"
              :columns="columns"
              :fetch="loadList"
              :table-params="tableParams"
            >
            </zm-table-data>
          </div>
        </div>
      </app-block>
      <div slot="footer" class="tr">
        <zm-button @click="close" type="">返回</zm-button>
        <zm-button @click="submit" type="primary">确定</zm-button>
      </div>
      <detail-container
        v-if="productVisible"
        v-model="productVisible"
        :id="detailProductId"
      ></detail-container>
    </zm-panel>
  </div>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import tableMixin from '@/mixins/zmTableMixin'
import productApis from '@/api/src/product'
import publicApis from '@/api/src/public'
import DetailContainer from '@/components/DetailContainer'

import { productColumns } from '../const'
export default {
  components: { DetailContainer },
  mixins: [panelMixin, tableMixin],
  props: {
    productInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      columns: productColumns(this),
      form: {
        productId: '',
        productName: '',
        name: '',
        type: '',
        productCode: '',
        discountPriceName: '',
        theoryCostPrice: '',
        practiceCostPrice: ''
      },
      searchForm: {
        name: '',
        categoryId: '',
        productType: ''
      },
      productVisible: false,
      detailProductId: '',
      productRules: {
        productId: [
          {
            required: 'true',
            message: '请选择一个产品',
            trigger: 'change'
          }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      treeList: [],
      loading: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getTree()
    if (this.productInfo.productId) {
      // this.$set(this.form, 'productId', this.productInfo.productId)
      // this.$set(this.form, 'name', this.productInfo.productName)
      // this.$set(this.form, 'type', this.productInfo.productType)
      // this.$set(this.form, 'productCode', this.productInfo.productCode)
      // this.$set(
      //   this.form,
      //   'discountPriceName',
      //   this.productInfo.discountPriceName
      // )
      // this.$set(this.form, 'parValue', this.productInfo.parValue)
      // this.$set(this.form, 'saleScalePrice', this.productInfo.saleScalePrice)
      // this.$set(this.form, 'saleScalePoint', this.productInfo.saleScalePoint)
      // this.$set(
      //   this.form,
      //   'consumptionScalePrice',
      //   this.productInfo.consumptionScalePrice
      // )
      // this.$set(
      //   this.form,
      //   'consumptionScalePoint',
      //   this.productInfo.consumptionScalePoint
      // )
      // this.$set(this.form, 'theoryCostPrice', this.productInfo.theoryCostPrice)
      // this.$set(
      //   this.form,
      //   'practiceCostPrice',
      //   this.productInfo.practiceCostPrice
      // )
      this.$set(this, 'form', {
        ...this.productInfo,
        name: this.productInfo.productName,
        type: this.productInfo.productType
      })
    }
  },
  methods: {
    async loadList () {
      this.loading = true
      const _res = await productApis.getPageList(
        this.assignQuery({
          ...this.searchForm,
          isLimitApartment: '1',
          shelfStatus: '1',
          salesType: this.productInfo.type
        })
      )
      this.initialTableData(_res.list, _res.count)
      this.loading = false
    },
    toReset () {
      // this.$set(this.form, 'productId', '')
      // this.$set(this.form, 'name', '')
      // this.$set(this.form, 'type', '')
      // this.$set(this.form, 'productCode', '')
      // this.$set(this.form, 'discountPriceName', '')
      // this.$set(this.form, 'parValue', '')
      // this.$set(this.form, 'saleScalePrice', '')
      // this.$set(this.form, 'saleScalePoint', '')
      // this.$set(this.form, 'consumptionScalePrice', '')
      // this.$set(this.form, 'consumptionScalePoint', '')
      // this.$set(this.form, 'theoryCostPrice', '')
      // this.$set(this.form, 'practiceCostPrice', '')

      this.$set(this, 'form', {
        productId: '',
        name: '',
        type: '',
        productCode: '',
        discountPriceName: '',
        parValue: '',
        saleScalePrice: '',
        saleScalePoint: '',
        consumptionScalePrice: '',
        consumptionScalePoint: '',
        theoryCostPrice: '',
        practiceCostPrice: ''
      })
      this.onReset()
    },
    async getTree () {
      const _res = await publicApis.getProductCategoryList()
      let childArr = _res
      let allArr = [
        {
          name: '全部',
          id: '-1'
        },
        ...childArr
      ]
      this.treeList = allArr
    },
    handleNodeClick (node) {
      if (!node.children || node.children.length === 0) {
        this.searchForm.categoryId = node.id
        this.onSearch()
      }
    },
    // 操作按钮
    onDetail (row) {
      // 调用产品详情
      // 调用产品详情
      this.detailProductId = row.id
      this.productVisible = true
    },
    chooseRadio (row) {
      this.form = {
        ...this.form,
        ...row,
        productId: row.id
      }
    },
    submit () {
      let _valid = false
      this.$refs.zmForm.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      // 产品id，产品名，产品类型，产品编码，产品面值，销售单总额， 产品有效期天数，优惠面值，点卡的产品面值
      // type 1兑换券，2卖品券，3点卡，4次卡，5优惠券
      let info = {
        productId: this.form.productId,
        productName: this.form.name,
        productType: this.form.type,
        productCode: this.form.productCode,
        discountPriceName: this.form.discountPriceName,
        parValue: this.form.parValue,
        saleScalePrice: this.form.saleScalePrice || '',
        saleScalePoint: this.form.saleScalePoint || '',
        consumptionScalePrice: this.form.consumptionScalePrice || '',
        consumptionScalePoint: this.form.consumptionScalePoint || '',
        theoryCostPrice: this.form.theoryCostPrice || '',
        practiceCostPrice: this.form.practiceCostPrice || ''
        // saleTotalPrice: this.form.saleTotalPrice,
        // productExpiredDays: 90, // this.form.productExpiredDays,
        // parValueName: this.form.parValueName
      }
      this.$emit('after-select', info)
      this.close()
    }
  }
}
</script>
<style lang="scss">
.selectProductStyle {
  .treeStyle {
    .el-tree-node__label {
      font-weight: 600 !important;
    }
    .el-tree-node__children {
      .el-tree-node__label {
      font-weight: 400 !important;
    }
    }

  }
}
</style>
